<!--答题详情-->
<template>
    <div class="paperWrap flex-column" style="max-height: calc(70vh - 32px);overflow:hidden auto;">
        <div class="paperHeader">
            <h2 style="margin: 0 auto; text-align: center; margin: 10px 0 20px">
                {{ this.examName }}
            </h2>
            <p style="text-align: center">
                <span style="margin-right: 20px"><img src="../../../../assets/exam/time.png" alt=""
                        style="vertical-align: text-bottom; padding: 0 5px" />考试时间：{{ showTimeNotSecond(examInfo.startTime) }} - {{
                    showTimeNotSecond(examInfo.endTime) }}</span>
                <span style="margin-right: 20px">
                    <Icon type="md-person" :size="16" style="font-size: 16px; margin: -2px 4px 0 4px" />用户:{{
                    currentUserName }}
                </span>
                <span style="margin-right: 20px"><img src="../../../../assets/exam/totalScore.png" alt=""
                        style="vertical-align: text-bottom; padding: 0 5px" />总分：{{ examScore }}</span>
                <span><img src="../../../../assets/exam/score.png" alt=""
                        style="vertical-align: text-bottom; padding: 0 5px" />得分：<b><a>{{ userScore }}</a></b></span>
            </p>
            <Divider />
        </div>
        <div class="paperContent">
            <QuestionList :data="examList" pattern="answer" :isGrader="isGrader" :paperid="paperid" :userId="userId"
                :examid="examid" :showGrade="true" @on-marking="marking">
            </QuestionList>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery';
    //import encryption from '@/libs/encryption.js'
    import usally from '@/mixin/usally';
    import { getPaperDetail, getRnak } from '@/api/exam';
    import QuestionList from '@/components/question-list';
    import {showTimeNotSecond} from '@/libs/utils';
    export default {
        name: 'exam',
        components: { QuestionList },
        mixins: [usally],
        props: ['examInfo', 'isGrader', 'currentUserName'],
        data() {
            return {
                showTimeNotSecond,
                userId: '',
                paperid: '',
                examid: '',
                examObj: {
                    id: this.$route.query.id,
                    paperid: this.$route.query.paperid,
                    endTime: this.$route.query.time,
                    status: this.$route.query.status
                },
                // 试卷分数
                examScore: 0,
                examName: '',
                // 试卷题
                examList: [],
                // 试卷答案
                result: {},
                // 学员成绩
                userScore: 0
            };
        },
        created() { },
        mounted() { },
        destroyed() { },
        methods: {
            marking() {
                this.getUserAnswer(this.paperid, this.userId, this.examid, true);
                this.$emit('on-marking');
            },
            // 查看分数接口
            getRankList(examid, userid) {
                let _this = this;
                let params = {
                    userId: userid
                };
                getRnak(examid, params).then((res) => {
                    if (res.code === 1) {
                        if (res.attribute.dataList.length > 0) {
                            _this.userScore = res.attribute.dataList[0].grade;
                        }
                    }
                });
            },
            // 试卷回显答案
            getRightAnswer(arr) {
                let showAnswer = arr.filter((item) => item.isRight === 1);
                let show = showAnswer.map((item) => item.description);
                let explanation = showAnswer.map((item) => item.explanation);
                let ids = showAnswer.map((item) => item.answerID)[0];
                return {
                    show: show.join('；'),
                    explanation: explanation.join('；'),
                    id: ids
                };
            },
            // 回显学员答案
            getUserAnswer(paperid, userId, examid, isScore) {
                if (!isScore) {
                    //评分更新不清空，保留滚动位置
                    this.examList = [];
                }
                this.paperid = paperid;
                this.userId = userId;
                this.examid = examid;
                getPaperDetail(examid, userId)
                    .then((res) => {
                        if (res.code === 1) {
                            let getData = res.data;
                            this.examName = getData.paperName;
                            this.examScore = getData.scores;
                            let grade = getData.grade;
                            this.userScore = grade < 0 ? 0 : grade;
                            let questionDto = getData.questionList || [];
                            questionDto.forEach((item) => {
                                item._disabled = true;
                                item.answerResult = item.showRight;
                                item.typeCode = item.type;
                                let questionType = item.questionType.toString();
                                if (questionType == '4') {
                                    item.modeCode = '6'; //与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
                                } else if (questionType == '5') {
                                    item.modeCode = '4'; //与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
                                } else if (questionType == '6') {
                                    item.modeCode = '5'; //与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
                                } else {
                                    item.modeCode = questionType;
                                }
                                if (item.modeCode === '2' || item.modeCode === '5') {
                                    item.userAnswer = item.userAnswer ? item.userAnswer.split(',') : [];
                                } else {
                                    item.userAnswer = item.userAnswer || '';
                                }
                            });
                            this.examList = questionDto;
                        } else {
                            this.$Message.error({
                                content: '试卷答案信息获取错误',
                                duration: 3
                            });
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            // 多选题
            handleJudgeScore(val1, val2) {
                let arr = [];
                if (val1.length > 0) {
                    for (let i = 0; i < val1.length; i++) {
                        if (val1[i].isRight === 1 || val1[i].isRight === '1') {
                            arr.push(val1[i].answerID);
                        }
                    }
                    if (JSON.stringify(arr) === JSON.stringify(val2)) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return false;
                }
            },
            // 判断题的正确与否
            handleAnws(val1) {
                if (val1.length > 0) {
                    if (val1[0].showRight === '1' || val1[0].showRight === 1) {
                        return true;
                    } else {
                        return false;
                    }
                }
            },
            parseDescription(question) {
                if (!question.answers) {
                    return;
                }
                let description;
                description = question.title.replace(
                    /\{\{.*?\}\}/g,
                    `<span class='quesBlank' style='display:inline-block;min-width:40px;padding:0px 5px;outline:none;box-shadow:none;border:none;border-bottom:1px solid rgb(168,166,200);color:#2d8cf0'></span>`
                );
                let el = document.createElement('div');
                el.innerHTML = description;
                let answersEle = el.getElementsByClassName('quesBlank');
                Array.from(answersEle).forEach((ele, index) => {
                    answersEle[index].innerHTML = question.userAnswer[0]
                        ? question.userAnswer[0].userAnswer
                        : '&nbsp;'; //this.escape2Html(question.answers[index].explanation || '&nbsp;',true);
                });
                return el.innerHTML;
            },
            escape2Html(str, needReplace) {
                let repStr = str.replace(/\{\{.*?\}\}/g, '___');
                let arrEntities = { lt: '<', gt: '>', nbsp: ' ', amp: '&', quot: '"' };
                if (needReplace) {
                    return repStr.replace(/&(lt|gt|amp|quot|nbsp);/gi, function (all, t) {
                        return arrEntities[t];
                    });
                } else {
                    return repStr;
                }
            }
        }
    };
</script>
<style>
    /* .paperWrap .ivu-tag {
    height: 16px;
    line-height: 16px;
    margin: 0;
    padding: 0 3px;
} */
</style>
<style scoped>
    .paperContent {
        flex: auto;
        width: 970px;
        padding: 10px;
        overflow: auto;
    }
</style>